import React from 'react';
import { Form, Icon, Input, Button, Checkbox, Select, Col, Modal } from 'antd';
import { Link } from 'react-router-dom';

import styles from './index.module.less';

const FormItem = Form.Item;
const Option = Select.Option;
const provinceData = [ 'Zhejiang', 'Jiangsu' ];
const cityData = {
  Zhejiang: [ 'Hangzhou', 'Ningbo', 'Wenzhou' ],
  Jiangsu: [ 'Nanjing', 'Suzhou', 'Zhenjiang' ],
};


class addForm extends React.Component {
  state = {
    cities: cityData[provinceData[0]],
    secondCity: cityData[provinceData[0]][0],
  }

  handleProvinceChange = value => {
    this.setState({
      cities: cityData[value],
      secondCity: cityData[value][0],
    });
  }

  onSecondCityChange = value => {
    this.setState({
      secondCity: value,
    });
  }
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const { visible, onCancel, onCreate, form } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { cities } = this.state;
    const {
      titleName = null,
    } = this.props;
    return (
      <React.Fragment>
        <Modal
          visible={visible}
          title={titleName}
          okText="保存"
          onCancel={onCancel}
          onOk={onCreate}
          width={800}
        >
          <div onSubmit={this.handleSubmit}>
            <div className={styles.box}>
              <span>联系人姓名：</span>
              <Input style={{ width: 220 }}/>
            </div>
            <div className={styles.box3}>
              <span className={styles.s1}>所在地区：</span>
              <Select
                defaultValue={provinceData[0]}
                style={{ width: 160 }}
                onChange={this.handleProvinceChange}
              >
                {provinceData.map(province => <Option key={province}>{province}</Option>)}
              </Select>
              <span className={styles.s2}>省</span>
              <Select
                style={{ width: 160 }}
                value={this.state.secondCity}
                onChange={this.onSecondCityChange}
              >
                {cities.map(city => <Option key={city}>{city}</Option>)}
              </Select>
              <span className={styles.s3}>市</span>
              <Select
                style={{ width: 160 }}
                value={this.state.secondCity}
                onChange={this.onSecondCityChange}
              >
                {cities.map(city => <Option key={city}>{city}</Option>)}
              </Select>
              <span className={styles.s4}>区</span>
            </div>
            <div className={styles.box2}>
              <span>街道地址：</span>
              <Input style={{ width: 590 }}/>
            </div>
            <div className={styles.box2}>
              <span>邮政编码：</span>
              <Input style={{ width: 220 }}/>
            </div>
            <div className={styles.box2}>
              <span>电话号码：</span>
              <Input style={{ width: 110 }} placeholder='区号'/>&nbsp;&nbsp;&nbsp;
              <Input style={{ width: 200 }} placeholder='电话号码'/>&nbsp;&nbsp;&nbsp;
              <Input style={{ width: 110 }} placeholder='分机号'/>
            </div>
            <div className={styles.box2}>
              <span>手机号码：</span>
              <Input style={{ width: 220 }}/>
            </div>
          </div>
        </Modal>
      </React.Fragment>
    );
  }
}

export default Form.create()(addForm);
